<template>
  <div style="display:flex;">
    <div class="sc-doc">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>文档中心</el-breadcrumb-item>
        <el-breadcrumb-item>短信</el-breadcrumb-item>
        <el-breadcrumb-item>审核标准</el-breadcrumb-item>
        <el-breadcrumb-item>使用须知</el-breadcrumb-item>
      </el-breadcrumb>
      <p class="doc-title1">{{doc.title}}</p>
      <div class="doc-tip">
        <p class="doc-time">最近更新时间：{{doc.updateTime}}</p>
        <div class="doc-pdf">
          <div class="pdf1">
            <img src="../assets/img/p1007.png" alt="10" /> 前往 GitHub 编辑
          </div>
          <div class="pdf1">
            <img src="../assets/img/p1002.png" alt="10" />查看PDF
          </div>
        </div>
      </div>

      <div class="app-complate sc-ce2" v-if="xiao">
        <div class="cai-anchor">
          <template v-for="item of doc.children">
            <p
              class="anchor-zhu"
              @click="anchorClick(item.id)"
              :title="item.title"
              :key="item.id"
            >{{item.title}}</p>
            <template v-for="item2 of item.children">
              <p
                class="anchor-fu"
                @click="anchorClick(item2.id)"
                :title="item2.title"
                :key="item2.id"
              >{{item2.title}}</p>
            </template>
          </template>
        </div>
      </div>

      <div class="doc-content" id="ceDoc" v-html="doc.content"></div>
      <template v-if="doc.children">
        <div v-for="(item,i) of doc.children" :key="i">
          <p class="doc-title2" :id="item.id">{{item.title}}</p>
          <div class="doc-content" v-if="item.content" v-html="item.content"></div>
          <template v-for="(item3,i3) of item.children">
            <p class="doc-title3" :id="item3.id" :key="i3+1000">{{item3.title}}</p>
            <div class="doc-content" :key="i3+10000" v-html="item3.content"></div>
          </template>
        </div>
      </template>
      <div class="bo-next">
        <div>
          <span class="iconfont">&#xe659;</span>上一篇：常用概念
        </div>
        <div>
          下一篇：签名审核标准
          <span class="iconfont">&#xe65a;</span>
        </div>
      </div>
      <div class="bo-contact">
        <div class="c-div1">
          <p class="c-title">相关文档</p>
          <div class="c-cont">
            <p>● 相关文档</p>
            <p>● 什么是云硬盘</p>
            <p>● 磁盘类型及性能介绍</p>
            <p>● 磁盘模式及使用方法</p>
            <p>● 共享云硬盘及使用方法</p>
            <p>● 云硬盘加密</p>
          </div>
        </div>
        <div class="c-div2">
          <p class="c-title">相关产品</p>
          <div class="c-cont">
            <p>弹性云服务器 ECS</p>
            <p>华为云WeLink</p>
            <p>华为云会议</p>
            <p>云硬盘 EVS</p>
            <p>对象储存服务 OBS</p>
            <p>云数据库 MySQL</p>
          </div>
        </div>
      </div>
      <div class="bo-help">
        <p class="he-t">文档内容是否对您有帮助？</p>
        <div style="display:flex">
          <div class="he-bang">
            <span class="iconfont">&#xe60d;</span> 有帮助
          </div>
          <div class="he-bang">
            <span class="iconfont">&#xe602;</span> 没帮助
          </div>
        </div>
        <p class="he-b">
          如果遇到产品相关问题，您可咨询
          <span class="h-g">智能客服</span> 或
          <span class="h-g">提交工单</span> 寻求帮助。
        </p>
      </div>
    </div>
    <div class="sc-ce sc-ce1" v-if="big">
      <div class="ce-top">
        <p class="ce-title">本页目录:</p>
        <div>
          <Anchor show-ink :affix="false">
            <template v-for="item of doc.children">
              <template v-if="item.children">
                <AnchorLink :href="'#'+item.id" :title="item.title" :key="item.id">
                  <template v-for="item2 of item.children">
                    <AnchorLink :href="'#'+item2.id" :title="item2.title" :key="item2.id" />
                  </template>
                </AnchorLink>
              </template>
              <template v-else>
                <AnchorLink :href="'#'+item.id" :title="item.title" :key="item.id" />
              </template>
            </template>
          </Anchor>
        </div>
      </div>
    </div>
    <div class="rno-menu-slide-btn" v-if="ceMenuShow" @click="openCeAnc">目录</div>
    <div class="ce-menu-mask" v-if="ceAncShow">
      <div class="rno-mask" @click="ceAncShow=false"></div>
      <div class="rno-document-catalog">
        <div class="rno-document-catalog-inner">
          <div class="sc-ce3">
            <p class="ce-title">本页目录:</p>
            <div>
              <Anchor show-ink :affix="false" @on-select="onSelect">
                <template v-for="item of doc.children">
                  <template v-if="item.children">
                    <AnchorLink :href="'#'+item.id" :title="item.title" :key="item.id">
                      <template v-for="item2 of item.children">
                        <AnchorLink :href="'#'+item2.id" :title="item2.title" :key="item2.id" />
                      </template>
                    </AnchorLink>
                  </template>
                  <template v-else>
                    <AnchorLink :href="'#'+item.id" :title="item.title" :key="item.id" />
                  </template>
                </template>
              </Anchor>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      big: false,
      xiao: false,
      ceMenuShow: false,
      ceAncShow: false,
      doc: {
        id: 8800,
        title: "使用须知",
        updateTime: "2020-06-11 17:19:30",
        content:
          "以下视频将为您介绍短信服务的使用须知：<br><br><br><br><br><br><br>",
        children: [
          {
            id: 880010,
            title: "认证模式",
            children: [
              {
                id: 880011,
                title: "实名认证简介",
                content: "实名认证简介内容<br><br><br><br><br><br><br>",
              },
              {
                id: 880012,
                title: "权益区别",
                content: "权益区别内容<br><br><br><br><br><br><br>",
              },
            ],
          },
          {
            id: 880020,
            title: "审核标准",
            content: "审核标准内容<br><br><br><br><br><br><br>",
          },
          {
            id: 880030,
            title: "审核流程",
            children: [
              {
                id: 880031,
                title: "审核周期",
                content: "审核周期内容<br><br><br><br><br><br><br>",
              },
              {
                id: 880032,
                title: "审核状态说明",
                content: "审核状态说明内容<br><br><br><br><br><br><br>",
              },
            ],
          },
          {
            id: 880040,
            title: "停封规则",
            content: "停封规则内容：<br><br><br><br><br><br><br> ",
          },
        ],
      },
    };
  },
  methods: {
    openCeAnc() {
      this.ceAncShow = true;
    },
    onSelect() {
      setTimeout(() => {
        this.ceAncShow = false;
      }, 50);
    },
    anchorClick(id) {
      let a = document.createElement("a");
      a.href = "#" + id;
      a.click();
    },
  },
  mounted() {
    if (document.body.clientWidth < 1201) {
      this.big = false;
      this.xiao = true;
    } else {
      this.big = true;
      this.xiao = false;
    }
    var that = this;
    window.onresize = function () {
      if (document.body.clientWidth < 1201) {
        that.big = false;
        that.xiao = true;
      } else {
        that.big = true;
        that.xiao = false;
      }
    };
    // 获取2菜单底部具浏览器高度
    // let h = document.getElementById('ceDoc').offsetTop
    let sc = document.documentElement.scrollTop || document.body.scrollTop;
    if (sc > 460) {
      this.ceMenuShow = true;
    }
    window.addEventListener("scroll", () => {
      if (that.big && document.querySelector(".sc-ce .ivu-anchor-ink-ball")) {
        if (window.pageYOffset < 176) {
          document.querySelector(".sc-ce .ivu-anchor-ink-ball").style.border =
            "0px";
        } else {
          document.querySelector(".sc-ce .ivu-anchor-ink-ball").style.border =
            "1px solid #00D09D";
        }
      }
      if (
        that.ceAncShow &&
        document.querySelector(".sc-ce3 .ivu-anchor-ink-ball")
      ) {
        if (window.pageYOffset < 118) {
          document.querySelector(".sc-ce3 .ivu-anchor-ink-ball").style.border =
            "0px";
        } else {
          document.querySelector(".sc-ce3 .ivu-anchor-ink-ball").style.border =
            "1px solid #00D09D";
        }
      }
      if (window.pageYOffset > 460) {
        this.ceMenuShow = this.ceAncShow ? false : true;
      } else {
        this.ceMenuShow = false;
      }
    });
  },
  watch: {
    $route(to, from) {
      console.log("页面变化：", this.$route.params.id);
    },
  },
};
</script>

<style lang='scss' scoped>
@import './doc.scss';
</style>